<template>
    <div class="infomationConsultation">
        <el-tabs v-model="activeTabs" @tab-click="handleClick">
            <el-tab-pane v-for="(item,index) in tabsList" :label="item.label" :name="item.name" :key="index">
                <el-form :inline="true" size="small" :model="filterForm[item.name]" class="demo-form-inline">
                    <el-form-item label="推送终端：">
                        <el-select v-model="filterForm[item.name].terminal" filterable>
                            <el-option v-for="subItem in sourceList"
                                       :key="subItem.id"
                                       :label="subItem.name"
                                       :value="subItem.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="分类：">
                        <el-select v-model="filterForm[item.name].sortType" filterable>
                            <el-option v-for="subItem in typesList"
                                       :key="subItem.id"
                                       :label="subItem.name"
                                       :value="subItem.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="城市站：">
                        <el-select v-model="filterForm[item.name].cityCode" filterable>
                            <el-option label="全国站" value="100100"></el-option>
                            <el-option v-for="subItem in cityList"
                                       :key="subItem.cityId"
                                       :label="subItem.city"
                                       :value="subItem.cityId">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="发布人：">
                        <el-input v-model="filterForm[item.name].pushPer" placeholder="请输入用户名称"></el-input>
                    </el-form-item>
                    <el-form-item label="发布时间：">
                        <el-col :span="11">
                            <el-date-picker type="date" placeholder="选择日期" value-format="yyyy-MM-dd" v-model="filterForm[item.name].beginTime" style="width: 100%;"></el-date-picker>
                        </el-col>
                        <el-col class="line tac mr10" :span="1">至</el-col>
                        <el-col :span="11">
                            <el-date-picker type="date" placeholder="选择日期" value-format="yyyy-MM-dd" v-model="filterForm[item.name].endTime" style="width: 100%;"></el-date-picker>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="标题：">
                        <el-input v-model="filterForm[item.name].title" placeholder="请输入用户名称"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmitSearch" id="monitorEnter">查询</el-button>
                    </el-form-item>
                </el-form>
                <div>
                    <el-button size="small" type="primary" @click="goHandlePage('new')">新建</el-button>
                </div>
                <div>
                    <el-divider></el-divider>
                    <template v-for="(subItem) in tableData[item.name]">
                        <div class="problem-item">
                            <ul>
                                <li class="mb10 problem-item-footer" v-if="subItem.type === '1'">
                                    政策类型：{{['普通政策', '限购政策'][+subItem.policyType]}}
                                    <span class="ml20 mr20"></span>
                                    适用城市：{{cityRender(subItem.cityCode)}}
                                </li>
                                <li class="mb10 problem-item-title">{{subItem.title}}</li>
                                <li class="mb10 problem-item-info">{{subItem.text}}</li>
                                <li class="problem-item-footer">
                                    <span>{{subItem.pushPer}}</span>
                                    <el-divider direction="vertical"></el-divider>
                                    <span>{{subItem.createTime | dateFormat}}</span>
                                    <el-divider direction="vertical"></el-divider>
                                    <span>浏览次数：{{subItem.count}}</span>
                                </li>
                            </ul>
                            <div class="problem-item-source" v-if="item.name === 'headline'">
                                <span>{{sourceListMap[subItem.terminal]}}</span>
                                <span v-if="subItem.terminal === 1">{{cityListMap[''+subItem.cityCode]}}</span>
                                <span v-if="subItem.terminal === 1">{{subItem.sortType | sortTypeFormat}}</span>
                            </div>
                            <div class="problem-item-button">
                                <el-image v-if="subItem.logoUrl" style="width: 120px;vertical-align: middle;" :src="subItem.logoUrl" :preview-src-list="[subItem.logoUrl]">
                                </el-image>
                                <div v-else style="width: 120px;vertical-align: middle;"></div>
                                <span class="problem-item-button-group">
                                    <el-button type="primary" size="mini" @click="goHandlePage('edit', subItem.id)">编辑</el-button>
                                    <el-button type="success" size="mini" @click="goHandlePage('view', subItem.id)">查看</el-button>
                                    <el-button type="danger" size="mini" @click="del(subItem.id)">删除</el-button>
                                </span>
                            </div>
                        </div>
                        <el-divider></el-divider>
                    </template>
                </div>
                <el-pagination
                        background
                        layout="total, sizes, prev, pager, next"
                        :current-page.sync="tableConfig[item.name].pageNum"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="tableConfig[item.name].pageSize"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :total="tableConfig[item.name].totalSize">
                </el-pagination>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script type="text/ecmascript-6">
    export default {
        name: 'infomationConsultation',
        title: '消息资讯',
        data() {
            return {
                activeTabs: 'headline',
                filterForm: {
                    headline: {
                        terminal: "",  //推送终端
                        cityCode: "",  // 城市
                        sortType: "",
                        title: "",
                        pushPer: "",
                        beginTime: "",
                        endTime: "",
                        type: 0
                    },
                    policy: {
                        terminal: "",
                        cityCode: "",
                        sortType: "",
                        title: "",
                        pushPer: "",
                        beginTime: "",
                        endTime: "",
                        type: 1
                    },
                    task: {
                        terminal: "",
                        cityCode: "",
                        sortType: "",
                        title: "",
                        pushPer: "",
                        beginTime: "",
                        endTime: "",
                        type: 2
                    }
                },
                sourceList: [
                    {id: '', name: '全部'},
                    {id: 0, name: '经纪人端'},
                    {id: 1, name: '好生活好房'},
                    {id: 2, name: '管家端'},
                ],
                sourceListMap: ['经纪人端', '好生活好房', '管家端'],
                typesList: [
                    {id: '', name: '全部'},
                    {id: 1, name: '房产头条'},
                    {id: 2, name: '国家政策'},
                    {id: 3, name: '房市动态'},
                    {id: 4, name: '新闻资讯'},
                    {id: 5, name: '合生专场'},
                    {id: 6, name: '珠江专场'}
                ],
                cityList: [],
                cityListMap: {
                    '100100': '全国站'
                },
                tabsList: [
                    {
                        label: '头条',
                        name: "headline"
                    },
                    {
                        label: '政策',
                        name: "policy"
                    },
                    {
                        label: '任务',
                        name: "task"
                    }
                ],
                tableConfig: {
                    headline: {
                        pageNum: 1,
                        pageSize: 10,
                        totalSize: 10
                    },
                    policy: {
                        pageNum: 1,
                        pageSize: 10,
                        totalSize: 10
                    },
                    task: {
                        pageNum: 1,
                        pageSize: 10,
                        totalSize: 10
                    }
                },
                tableData: {
                    headline: [],
                    policy: [],
                    task: [],
                }
            }
        },
        created() {
            this.getAllCity();
            this.getTableList()
        },
        activated() {
            this.onSubmitSearch()
        },
        mounted() {
        },
        methods: {
            getAllCity() {
                this.$axios.post("/city/region/getCity/byRegion", {}).then((res) => {
                    this.cityList = res;
                    const cityListMap = this.cityListMap
                    res.forEach((item) => {
                        cityListMap[String(item.cityId)] = item.city
                    })
                    this.cityListMap = cityListMap
                })
            },

            goHandlePage(type, id) {
                this.$router.push({
                    path: "./infomationConsultationDetail", query: {
                        type,
                        id
                    }
                })
            },
            handleClick(e) {
                this.getTableList()
            },
            onSubmitSearch() {
                this.tableConfig[this.activeTabs].pageNum = 1
                this.getTableList()
            },
            getTableList() {
                this.$axios.post("/cms/news/listPage", {
                    pageSize: this.tableConfig[this.activeTabs].pageSize,
                    pageNum: this.tableConfig[this.activeTabs].pageNum,
                    ...this.filterForm[this.activeTabs]
                }).then((res) => {
                    this.tableData[this.activeTabs] = res.list;
                    console.log(res.list);
                    this.tableConfig[this.activeTabs].totalSize = res.total
                })
            },
            handleSizeChange(size) {
                this.tableConfig[this.activeTabs].pageNum = 1;
                this.tableConfig[this.activeTabs].pageSize = size;
                this.getTableList()
            },
            handleCurrentChange(page) {
                this.tableConfig[this.activeTabs].pageNum = page;
                this.getTableList()
            },
            replyFeedback() {

            },
            submitDialog() {
                this.dialogFormVisible = false;

            },
            del(id) {
                this.$confirm('您确定要删除吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.post("/cms/news/delete", {
                        id: id
                    }).then((res) => {
                        this.getTableList()
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    }).catch(() => {
                        this.$message({
                            type: 'error',
                            message: '删除失败!'
                        });
                    })


                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            cityRender(cityCode) {
                if (cityCode === '100100') {
                    return "全国站"
                }
                const cityCodeList = cityCode.split(',');
                let resultCity = []
                cityCodeList.forEach((item) => {
                    resultCity.push(this.cityListMap[item])
                })
                return resultCity.join(',')
            }
        },
        components: {},
        computed: {},
        filters: {
            dateFormat(time, fmt = 'yyyy-MM-dd hh:mm:ss') {
                var date = new Date(time * 1000);
                var o = {
                    "M+": date.getMonth() + 1, //月份
                    "d+": date.getDate(), //日
                    "h+": date.getHours(), //小时
                    "m+": date.getMinutes(), //分
                    "s+": date.getSeconds(), //秒
                    "q+": Math.floor((date.getMonth() + 3) / 3), //季度
                    "S": date.getMilliseconds() //毫秒
                };
                if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
                for (var k in o)
                    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
                return fmt;
            },
            sortTypeFormat(sortType) {
                const typesListMap = ['房产头条', '国家政策', '房市动态', '新闻资讯', '合生专场', '珠江专场'];
                let resultSortType = [];
                const sortTypeList = sortType.split(',')
                sortTypeList.forEach((item) => {
                    resultSortType.push(typesListMap[item - 1])
                })
                return resultSortType.join(',')
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
    .infomationConsultation {
        .problem-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            ul {
                flex: 1;
                padding: 0 30px;
                color: rgba(27, 37, 63, 0.5);
            }
            .problem-item-title {
                font-family: PingFangSC-Medium, PingFangSC;
                font-weight: 500;
                color: rgba(27, 37, 63, 1);
            }
            .problem-item-info {
                white-space: nowrap;
                overflow: hidden;
                width: 700px;
                text-overflow: ellipsis;
                color: rgba(27, 37, 63, 0.8);
            }
        }
        .problem-item-source {
            width: 500px;
            margin-right: 20px;
            font-size: 14px;
            color: #999;
        }
        .problem-item-button {
            display: flex;
            justify-content: space-between;
            width: 220px;
            height: 100px;
        }
        .problem-item-button-group {
            vertical-align: middle;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            align-content: space-between;
        }
    }
</style>
<style lang="stylus">
    .infomationConsultation {
        .problem-item-button-group {
            .el-button {
                margin: 0
            }
        }
    }
</style>
